// Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = 'Nunito, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
Chart.defaults.global.defaultFontColor = '#858796';

// Line Chart Example
var ctx = document.getElementById("myLineChart"); // 确保 HTML 中有对应的 canvas 元素
var myLineChart = new Chart(ctx, {
  type: 'line', // 折线图类型
  data: {
    labels: ["Direct", "Referral", "Social"], // x轴标签
    datasets: [{
      label: 'Sample Data', // 数据集的标签
      data: [55, 30, 15], // 数据点
      borderColor: '#4e73df', // 线条颜色
      backgroundColor: 'rgba(78, 115, 223, 0.2)', // 线条填充颜色
      borderWidth: 2, // 线条宽度
      pointRadius: 5, // 数据点半径
      pointBackgroundColor: '#4e73df', // 数据点背景色
      pointBorderColor: '#ffffff', // 数据点边框颜色
      pointHoverRadius: 7, // 悬停时数据点半径
      hoverBackgroundColor: '#ffffff', // 悬停时背景色
      hoverBorderColor: "#7c7c7c", // 悬停时边框颜色
      fill: true, // 是否填充颜色
      hitRadius: 10 // 触摸敏感度
    }],
  },
  options: {
    maintainAspectRatio: false,
    tooltips: {
      backgroundColor: "rgb(255,255,255)",
      bodyFontColor: "#858796",
      borderColor: '#dddfeb',
      borderWidth: 1,
      xPadding: 15,
      yPadding: 15,
      displayColors: false,
      caretPadding: 10,
      callbacks: {
        label: function(tooltipItem, data) {
          var label = data.datasets[tooltipItem.datasetIndex].label || '';
          if (label) {
            label += ': ';
          }
          label += tooltipItem.yLabel;
          return label;
        }
      }
    },
    legend: {
      display: true, // 显示图例
      position: 'top', // 图例位置
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true, // y轴从零开始
          suggestedMax: 60 // 提建议最大值
        },
        scaleLabel: {
          display: true,
          labelString: 'Values' // y轴标签
        }
      }],
      xAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'Categories' // x轴标签
        }
      }]
    },
  },
});